<template>
	<view class="content">
		<view class="title">输入短信验证码</view>
		<view class="title_content">验证码已发送至 {{phone}}</view>
		<view class="authcode">
			<myp-one ref="hi" v-model="autoCode" @finish="finishedOne"></myp-one>
		</view>
		<view class="auth" v-if="captchaTime>0">{{captchaTime}}s</view>
		<view class="auth" v-else @click="getyzm">重发短信验证码</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import mypone from '@/components/myp-one/myp-one.vue';
	export default {
		components: {
			mypone
		},
		data() {
			return {
				captchaTime: 0,
				autoCode: '',
				phone: '', //手机号
				androidIos: '',
				source: '',
				forgetCode: '' //验证号

			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow(e) {
			this.phone = this.userInfo.phone || ''; //渲染手机号到修改密码页面
		},
		onLoad() {
			this.androidIos = getApp().globalData.androidIos
			this.source = getApp().globalData.source
		},
		methods: {
			...mapMutations(['setUserInfo']),
			// 失去点击跳转到设置新密码页面
			finishedOne() {
				if (this.autoCode != this.autoCode) {
					uni.showToast({
						title: '验证码错误，请重新输入或获取',
						icon: 'none'
					})
					this.autoCode = ''
					this.$refs.hi.clear()
					return
				}
				let data = {
					code: this.autoCode,
					phone: this.phone,
					appId: this.androidIos
				}
				this.$httpNew
					.post('authApi/user/checkForgetUserPasswordCode', data)
					.then(res => {
						this.forgetCode = res
						if (this.autoCode == this.autoCode) {
							uni.navigateTo({
								url: './edit_password?forgetCode=' + this.forgetCode + '&phone=' + this.phone
							});
						}
					}).catch(err => {
						console.log('校检验证码', err);
					})
			},

			getyzm() {
				if (this.captchaTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: 'none'
					})
					return;
				} else {
					this.captchaTime = 60;
					let timer = setInterval(() => {
						this.captchaTime--;
						// console.log(this.captchaTime)
						if (this.captchaTime < 1) {
							clearInterval(timer);
							this.captchaTime = 0
						}
					}, 1000)
				};
				// 点击重发验证码
				let data = {
					phone: this.phone,
					appId: this.androidIos
				}
				this.$httpNew
					.get('authApi/auth/GetVerificationCodeByForget', data)
					.then(res => {
						console.log(res);
						if (res == null) {
							uni.showToast({
								title: '验证码已重新发送',
								icon: 'none'
							});
						}
					})

			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 60rpx;
		}

		.title_content {
			margin-top: 30rpx;
		}

		.authcode {
			margin-top: 200rpx;
		}

		.auth {
			margin-top: 30rpx;
		}
	}
</style>
